<template>
	<view class="">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick='leftClick'></NavTitle>
		<view class="flex_ZC">
			<view class="stepbox mt20">
				<view class="stepTitle flex_ld">
					<text>使用流程</text>
				</view>
				<view class="technological ">
					<view class="step flex_ZC">
						<image :src="baseUrl + '/static/ymimage/step1.png'" mode="aspectFill"></image>
						<text class="f28 c3 fw5">填写基本信息</text>
					</view>
					<view class="nextstep">
						<image :src="baseUrl + '/static/ymimage/step4.png'" mode="aspectFill"></image>
					</view>
					<view class="step flex_ZC">
						<image :src="baseUrl + '/static/ymimage/step2.png'" mode="aspectFill"></image>
						<text class="f28 c3 fw5">开通账款服务</text>
					</view>
					<view class="nextstep">
						<image :src="baseUrl + '/static/ymimage/step4.png'" mode="aspectFill"></image>
					</view>
					<view class="step flex_ZC">
						<image :src="baseUrl + '/static/ymimage/step3.png'" mode="aspectFill"></image>
						<text class="f28 c3 fw5">支付保证金</text>
					</view>
				</view>
			</view>
			<view class="btn_box1 mart24 flex_c" @click="$u.debounce(goJoin, 300)">
				<text class="fw5">{{btnTitle}}</text>
			</view>
			<view class="swipers">
				<u-swiper :list="swiperList" indicatorMode="dot" imgMode="aspectFit" keyName="image"
					bgColor="transparent" height="220" circular></u-swiper>
			</view>
			<view class="extension mart24" v-if="businessInfo.id">
				<image class="ex_bg" :src="baseUrl + '/static/ymimage/join3.png'" mode="aspectFill"></image>
				<view class="user_card flex_dq">
					<image class="tximg" :src="businessInfo.avatar" mode="aspectFill">
					</image>
					<view class=" flex_Z">
						<text class="f40 c33 fw5">{{businessInfo.name}}</text>
						<text class="f20 c6 names">客户经理</text>
						<text class="f24 c3 fw5">平台答疑｜政策同步｜数据分析</text>
					</view>
				</view>
				<view class="lxfs_box flex_ld_a">
					<view class="lxfs flex_dq" @click="callPhone">
						<image :src="baseUrl +  '/static/icon/i_dh.png'" mode="aspectFill"></image>
						<text class="f26 c3 fw5">{{businessInfo.contact_number || ''}}</text>
					</view>
					<view class="lxfs flex_dq" v-show="businessInfo.wechat" @click="clickCopy">
						<image :src="baseUrl +  '/static/icon/i_wx.png'" mode="aspectFill"></image>
						<u-tooltip color="#333333" :text="businessInfo.wechat || ''"></u-tooltip>
					</view>
				</view>
			</view>
			<view class="empty3"></view>
			<view class="btns flex_ld">
				<text class="sign_out" @click="isSetUp">设置</text>
				<!-- #ifdef MP-WEIXIN-->
				<view class="service">
					<text>联系客服</text>
					<button class="kefu" open-type="contact">联系客服</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="" style="position: relative;">
					<view class="service">联系客服</view>
					<contact-button class="service" tnt-inst-id="Fs0_yOao" scene="SCE01350885" />
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="service" @click="callPhoneTwo">
					<text>联系客服</text>
				</view>
				<!-- #endif -->
			</view>
			<view class="warm flex_dq">
				<u-icon name="info-circle-fill" color="#3c9cff" size="15"></u-icon>
				<text class="ml10">云猫入驻适用于</text>
				<text class="reds">在线购物</text>
				<text>商家，顾客以</text>
				<text class="reds">网购</text>
				<text>消费为主</text>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		settledEquity,
		settledDetails,
		showSlide
	} from "../../api/settled.js"

	export default {
		data() {
			return {
				title: "云猫入驻",
				backgroundColor: "",
				baseUrl: this.$imageBaseUrl,
				btnTitle: "立即入驻",
				examineState: 1, //是否入驻
				businessInfo: {}, //推荐人
				customerService: {},
				showWebView: false,
				tipShow2: false,
				revokeShow: false,
				swiperList: [],
				ymDetails: {}
			}
		},

		onLoad() {
			if (uni.getStorageSync('ymShopDetails')) {
				this.ymDetails = JSON.parse(uni.getStorageSync('ymShopDetails')) || {}
				if (this.ymDetails.step > 0) {
					this.btnTitle = '继续入驻'
				}
			}
		},
		onShow() {
			this.showSlide()
			this.joinInterests()
		},
		// 页面滚动
		onPageScroll: function(e) {
			console.log(e);
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
		// onUnload() {
		// 	this.leftClick()
		// },
		methods: {
			showSlide() {
				showSlide().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.swiperList = res.data
					}
				})
			},
			gettledDetails() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				settledDetails().then(res => {
					this.ymDetails = res.data
					uni.hideLoading()
					if (res.data.step > 0) {
						this.btnTitle = '继续入驻'
					}
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.switchTab({
						url: '/pages/index/mine'
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},

			callPhoneTwo() {
				// #ifdef H5
				window.location.href = "https://work.weixin.qq.com/kfid/kfc14a581293b68850f"
				// #endif
			},
			// 入驻权益
			joinInterests() {
				settledEquity().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.businessInfo = res.data.business
						this.customerService = res.data.customer_service
					}
				})
			},

			goJoin() {

				if (this.ymDetails.step == 1) {
					const data = {
						id: this.ymDetails.id,
						company_type: this.ymDetails.company_type,
					}
					uni.navigateTo({
						url: '/pageYm/ymJoin/joinApplyTwo?data=' + JSON.stringify(data)
					})
				} else if (this.ymDetails.step == 2) {
					uni.navigateTo({
						url: '/pageYm/ymJoin/joinApplyThree?id=' + this.ymDetails.id
					})
				} else if (this.ymDetails.step == 3) {
					uni.navigateTo({
						url: '/pageYm/ymJoin/joinApplyFour?id=' + this.ymDetails.id
					})
				} else if (this.ymDetails.step == 4) {
					uni.navigateTo({
						url: '/pageYm/ymJoin/storeDetail?id=' + this.ymDetails.id
					})
				} else if (this.ymDetails.step == 5) {
					uni.navigateTo({
						url: '/pageYm/ymJoin/openAccounts?id=' + this.ymDetails.id
					})
				} else {
					uni.navigateTo({
						url: '/pageYm/ymJoin/agreement'
					})
				}
			},
			// 设置
			isSetUp() {
				uni.navigateTo({
					url: '/pageUser/myuser/setting'
				})
			},
			// 复制
			clickCopy() {
				uni.setClipboardData({
					data: this.businessInfo.wechat,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			// 电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.businessInfo.contact_number
				});
			},
			// 查看申请资料
			lookapplyDarta() {
				uni.navigateTo({
					url: '/pagesMy/businessJoin/submitInformation?applyState=' + true
				})
			},
			// 去商家端首页
			goIndex() {
				uni.navigateToMiniProgram({
					appId: 'wx8776bf9fe30a9fe5',
					path: 'pages/index/cloudCatIndex',
					success(res) {
						console.log(res);
					}
				})
			},

		},

	}
</script>
<style>
	

	 contact-button {
		width: 504rpx;
		height: 88rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
		z-index: 9999;
	}

	.service {
		position: relative;
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.kefu {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		z-index: 999;
		opacity: 0;
		border-radius: 20rpx;
	}
</style>
<style scoped>
	.mt20 {
		margin-top: 20rpx;
	}


	.stepbox {
		width: 690rpx;
		background: #FFFFFE;
		border-radius: 14rpx;
		padding: 20rpx 24rpx;
		z-index: 99;
	}

	.stepTitle {
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 32rpx;
	}

	.technological {
		display: flex;
		justify-content: center;
	}

	.step image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-bottom: 16rpx;
	}

	.nextstep image {
		width: 56rpx;
		height: 36rpx;
		margin-top: 20rpx;
	}

	.warm {
		width: 100%;
		background: #EEF1FF;
		font-size: 20rpx;
		color: #2b85e4;
		border-radius: 10rpx;
		padding: 8rpx;
		margin-top: 30rpx;
	}

	.reds {
		color: #fa3534;
		margin: 0 4rpx;
	}

	.ml10 {
		margin-left: 10rpx;
	}

	.join1 {
		width: 460rpx;
		height: 74rpx;
	}

	.join2 {
		width: 690rpx;
		height: 242rpx;
	}

	.btn_box1 {
		width: 690rpx;
		height: 88rpx;
		background: #FFCC28;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.btn_box2 {
		width: 690rpx;
		height: 88rpx;
		background: #3378CC;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}

	.btn_box3 {
		width: 690rpx;
		height: 88rpx;
		background: #fa3534;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}

	.shz {
		color: #3378CC;
	}

	.shbh {
		color: #fa3534;
	}

	.chengg {
		color: #95f204;
	}

	.shibai {
		color: #FA6E01;
		background: #FFF5EE;
	}

	.mart24 {
		margin-top: 24rpx;
	}

	.swipers {
		width: 690rpx;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
		margin: 30rpx 0;
		background: #cccccc;
		border-radius: 14rpx;
		background: #FFFFFE;
		padding: 20rpx 0;
	}

	.interests {
		position: relative;
		width: 690rpx;
		background: #FFFFFE;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 14rpx;
		padding: 30rpx;
	}

	.interests>text {
		font-weight: 700;
		color: #3333333;
	}

	.qy_box {
		margin: 30rpx 24rpx 0;
	}

	.qyimg {
		width: 60rpx;
		height: 60rpx;
		margin-right: 24rpx;
	}

	.extension {
		position: relative;
		width: 690rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 0 24rpx;
	}

	.ex_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		width: 690rpx;
		transform: translateX(-50%);
		height: 152rpx;
		background: #f8f8f8;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service {
		position: relative;
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.kefu {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		z-index: 999;
		opacity: 0;
		border-radius: 20rpx;
	}

	.user_card {
		position: relative;
		padding: 16rpx 0 24rpx 0;
		border-bottom: 1rpx dashed rgba(0, 0, 0, 0.07);
	}

	.tximg {
		width: 126rpx;
		height: 126rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(0, 0, 0, 0.1);
		margin-right: 16rpx;
	}

	.names {
		margin: 4rpx 0;
	}

	.lxfs_box {
		position: relative;
		width: 100%;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.lxfs {
		width: 50%;
		/* background: pink; */
	}

	.lxfs>image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
		margin-left: 24rpx;
	}
</style>